<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <link href="/static/css/app.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-danger">
        <div class="container-fluid">
            <span class="navbar-brand">企业云资源申请系统</span>
            <div class="navbar-nav ms-auto">
                <span class="nav-link">欢迎, {{.user.Username}} (资源管理员)</span>
                <a class="nav-link" href="/logout">退出</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <!-- 系统概览 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card text-center bg-primary text-white">
                    <div class="card-body">
                        <h4 class="card-title">{{.system_stats.total_users}}</h4>
                        <p class="card-text">总用户数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-success text-white">
                    <div class="card-body">
                        <h4 class="card-title">{{.system_stats.active_projects}}</h4>
                        <p class="card-text">活跃项目</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-warning text-white">
                    <div class="card-body">
                        <h4 class="card-title">{{.system_stats.pending_requests}}</h4>
                        <p class="card-text">待处理申请</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-info text-white">
                    <div class="card-body">
                        <h4 class="card-title">{{.system_stats.resource_usage}}%</h4>
                        <p class="card-text">资源使用率</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">管理功能</h6>
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="#" class="list-group-item list-group-item-action active" data-tab="applications">
                            所有申请
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-tab="domain">
                            域信息
                        </a>
                        <a href="#" class="list-group-item list-group-item-action" data-tab="audit">
                            审计日志
                        </a>
                    </div>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-9">
                <!-- 所有申请 -->
                <div id="applications-tab" class="tab-content">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">系统内所有资源申请</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>申请ID</th>
                                            <th>申请人</th>
                                            <th>项目</th>
                                            <th>资源类型</th>
                                            <th>状态</th>
                                            <th>申请时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{range .all_applications}}
                                        <tr>
                                            <td>{{.ID}}</td>
                                            <td>{{.Applicant}}</td>
                                            <td>{{.ProjectName}}</td>
                                            <td>{{.ResourceType}}</td>
                                            <td>
                                                {{if eq .Status "pending"}}
                                                <span class="badge bg-warning">待审批</span>
                                                {{else if eq .Status "approved"}}
                                                <span class="badge bg-success">已批准</span>
                                                {{else}}
                                                <span class="badge bg-danger">已拒绝</span>
                                                {{end}}
                                            </td>
                                            <td>{{.CreatedAt}}</td>
                                            <td>
                                                {{if eq .Status "pending"}}
                                                <div class="action-buttons">
                                                    <button class="btn btn-success btn-sm" 
                                                            onclick="approveApplication('{{.ID}}', 'approve')">
                                                        批准
                                                    </button>
                                                    <button class="btn btn-danger btn-sm" 
                                                            onclick="approveApplication('{{.ID}}', 'reject')">
                                                        拒绝
                                                    </button>
                                                </div>
                                                {{else}}
                                                <small class="text-muted">已处理</small>
                                                {{end}}
                                            </td>
                                        </tr>
                                        {{else}}
                                        <tr>
                                            <td colspan="7" class="text-center text-muted">暂无申请记录</td>
                                        </tr>
                                        {{end}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 域信息 -->
                <div id="domain-tab" class="tab-content d-none">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">企业域管理信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>域基本信息</h6>
                                    <dl class="row">
                                        <dt class="col-sm-4">域名:</dt>
                                        <dd class="col-sm-8"><code>{{.domain_info.domain_name}}</code></dd>
                                        
                                        <dt class="col-sm-4">用户总数:</dt>
                                        <dd class="col-sm-8">{{.domain_info.total_users}}</dd>
                                        
                                        <dt class="col-sm-4">项目总数:</dt>
                                        <dd class="col-sm-8">{{.domain_info.total_projects}}</dd>
                                    </dl>
                                </div>
                                <div class="col-md-6">
                                    <h6>配置验证状态</h6>
                                    <div class="alert alert-success">
                                        <h6>✅ Keystone配置验证通过</h6>
                                        <ul class="mb-0">
                                            <li>企业域配置正确</li>
                                            <li>角色体系完整</li>
                                            <li>用户权限分配正确</li>
                                            <li>项目配额设置合理</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 审计日志 -->
                <div id="audit-tab" class="tab-content d-none">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">系统操作审计日志</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>时间</th>
                                            <th>用户</th>
                                            <th>操作</th>
                                            <th>结果</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>2024-01-15 14:30:25</td>
                                            <td>dev-li</td>
                                            <td>申请虚拟机资源</td>
                                            <td><span class="badge bg-info">提交</span></td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-15 14:35:12</td>
                                            <td>tl-wang</td>
                                            <td>审批申请 app_001</td>
                                            <td><span class="badge bg-success">批准</span></td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-15 15:20:08</td>
                                            <td>pm-zhang</td>
                                            <td>查看团队申请</td>
                                            <td><span class="badge bg-info">查看</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签页切换
        document.querySelectorAll('[data-tab]').forEach(function(tab) {
            tab.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新活动标签
                document.querySelectorAll('.list-group-item-action').forEach(function(item) {
                    item.classList.remove('active');
                });
                this.classList.add('active');
                
                // 切换内容
                document.querySelectorAll('.tab-content').forEach(function(content) {
                    content.classList.add('d-none');
                });
                document.getElementById(this.dataset.tab + '-tab').classList.remove('d-none');
            });
        });

        // 审批申请
        function approveApplication(applicationId, action) {
            const actionText = action === 'approve' ? '批准' : '拒绝';
            
            if (!confirm(`确定要${actionText}这个申请吗？`)) {
                return;
            }
            
            const formData = new FormData();
            formData.append('action', action);
            
            fetch(`/dashboard/approve/${applicationId}`, {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert('操作失败: ' + data.error);
                } else {
                    alert('操作成功！');
                    location.reload();
                }
            })
            .catch(error => {
                alert('操作失败: ' + error.message);
            });
        }
    </script>
</body>
</html>